---
title: "Choice Box"
description: A bigger, juiced-up version of a Radio or Checkbox, giving users a chunky tap target and extra deets.
order: 8
published: true
references: ["https://react-spectrum.adobe.com/react-aria/GridList.html#props"]
---

## Basic
The Choicebox is an enhanced version of a GridList, offering users a larger tap target and additional details.

<How toUse="collections/choicebox/choicebox-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/choice-box
```

## Composed components
<Composed components={['checkbox']}/>

## Manual installation
```bash
npm i react-aria-components @heroicons/react
```

<SourceCode toShow='choice-box' />

## Anatomy
```
import {
  Choicebox,
  ChoiceboxDescription,
  ChoiceboxItem,
  ChoiceboxLabel,
} from "@/components/ui/choicebox"
```

```
<Choicebox aria-label="Select items" selectionMode="multiple">
  <ChoiceboxItem textValue="premium">
    <ChoiceboxLabel>Premium</ChoiceboxLabel>
    <ChoiceboxDescription>
      Advanced options for growing needs.
    </ChoiceboxDescription>
  </ChoiceboxItem>
  <ChoiceboxItem textValue="deluxe">
    <ChoiceboxLabel>Deluxe</ChoiceboxLabel>
    <ChoiceboxDescription>
      Top-tier features for maximum performance.
    </ChoiceboxDescription>
  </ChoiceboxItem>
  <ChoiceboxItem textValue="ultimate">
    <ChoiceboxLabel>Ultimate</ChoiceboxLabel>
    <ChoiceboxDescription>
      All-inclusive plan with every feature available.
    </ChoiceboxDescription>
  </ChoiceboxItem>
  <ChoiceboxItem textValue="enterprise">
    <ChoiceboxLabel>Enterprise</ChoiceboxLabel>
    <ChoiceboxDescription>
      Customized solutions for large organizations.
    </ChoiceboxDescription>
  </ChoiceboxItem>
</Choicebox>
```

## Multiple selection
By default, it uses single selection mode. To allow multiple selections, set the selectionMode prop to 'multiple'. This enables users to select more than one item at a time.

<How toUse="collections/choicebox/choicebox-multiple-selection-demo" />

## Columns and gap
By default, the gap between items is set to `0`, and the `columns` prop is also `0`. You can customize both by providing your own `gap` and `columns` values.
<How isCenter={false} withNoPadding={true} toUse="collections/choicebox/choicebox-columns-demo" />

## Icons
You can add icons to the Choicebox items by providing the `icon` prop.
<How toUse="collections/choicebox/choicebox-icon-demo" />

## Controlled
This component can `function` as either controlled or uncontrolled. For controlled use, provide the `selectedKeys` prop and manage updates with the `onSelectionChange` event handler.
<How toUse="collections/choicebox/choicebox-controlled-demo" />

## Disabled
Disable the entire Choicebox by applying the `isDisabled` prop.
<How withNoPadding={true} toUse="collections/choicebox/choicebox-disabled-demo" />

Individual items can also be disabled by specifying their keys in the `disabledKeys` prop.

```tsx
<Choicebox disabledKeys={['sm', 'lg']} />
```
